<div id="content_header" class="no-print">
  <h3>Payment</h3>
</div>
<div id="sub_container" class="container-fluid" ui-view="sub">

<a class="no-print" href ui-sref=".edit">Click Here to Edit</a>

<div class="row">
  <h3>{{ payment.TransactionNumber }}</h3>
  <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
    <form role="form" ng-submit="postPayment()">

      <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
          <div class="form-group">
            <label for="payer">Received From</label>
            <span class="form-control">{{ payment.ReceivedFrom }}</span>
          </div>

          <div class="panel panel-primary">
            <div class="panel-heading">
              <h4 class="panel-title">Items</h4>
            </div>
            <div class="panel-body">
              <table class="table table-striped table-condensed table-bordered">
                <thead>
                  <tr>
                    <th></th>
                    <th class="text-center">Student</th>
                    <th class="text-center">Item</th>
                    <th class="text-center">Qty</th>
                    <th class="text-center">Discount</th>
                    <th class="text-center">Total</th>
                  </tr>
                </thead>
                <tbody>
                  <tr ng-repeat="invoice in payment.Invoices">
                    <td>
                    <!--
                      <a href="" ng-click="openModal(payment)"><i class="simple-icon-tag"></i></a>
                      &nbsp
                      <a href="" ng-click="removeRow($index)"><i class="simple-icon-trash"></i></a>
                    --></td>
                    <td>
                      <span ng-if="invoice.PlacementTest">{{ invoice.PlacementTest.Student.SID }} - {{ invoice.PlacementTest.Student.FullName }}</span>
                      <span ng-if="invoice.Enrollment">{{ invoice.Enrollment.Student.SID }} - {{ invoice.Enrollment.Student.FullName }}</span>
                    </td>
                    <td>
                      <span ng-if="invoice.InvoiceType === 0">PT {{ invoice.PlacementTest.DateTime | date:'medium' }}</span>
                      <span ng-if="invoice.InvoiceType === 1">{{ invoice.Enrollment.CourseSchedule.CourseName }}</span>
                    </td>
                    <td class="text-center">{{ (invoice.PlacementTest || invoice.Enrollment) ? '1' : '0' }}</td>
                    <td>{{ invoice.TotalDiscount ? (invoice.TotalDiscount | currency:'Rp. ') : '-'  }}</td>
                    <!-- <td>
                      <span class="form-control" style="text-align: right;">
                        <span ng-show="invoice.TotalDiscount">
                          <strike><small>{{ invoice.TotalAmount | currency: 'Rp. ' }}</small></strike> {{ (invoice.TotalAmount - invoice.TotalDiscount) | currency: 'Rp. ' }}
                        </span>
                        <span ng-hide="invoice.TotalDiscount">
                          {{ invoice.TotalAmount | currency: 'Rp. ' }}
                        </span>
                      </span>
                    </td> -->
                    <td class="text-right">{{ invoice.TotalAmount | currency: 'Rp. ' }}</td>
                  </tr>
                </tbody>
                <tfoot>
                  <tr>
                    <th colspan="5" class="text-right">Total</th>
                    <th class="text-right">{{ payment.TotalAmount | currency: 'Rp. ' }}</th>
                  </tr>
                  <tr>
                    <th colspan="5" class="text-right">Total Discount</th>
                    <th class="text-right">{{ payment.TotalDiscount | currency: 'Rp. ' }}</th>
                  </tr>
                  <tr>
                    <th colspan="5" class="text-right">Total Amount*</th>
                    <th class="text-right">{{ (payment.TotalAmount - payment.TotalDiscount) | currency: 'Rp. ' }}</th>
                  </tr>
                  <tr>
                  <th colspan="6" class="text-right"><small><i>*{{ (payment.TotalAmount - payment.TotalDiscount) | inWords }} rupiah</i></small></th>
                  </tr>
                </tfoot>
              </table>
            </div>
          </div>

          <div class="panel panel-primary">
            <div class="panel-heading">
              <h4 class="panel-title">Payment Method</h4>
            </div>
            <div class="panel-body">

              <table class="table table-condensed">
                <tbody>
                <tr ng-show="checkContain(0)">
                    <td>Cash</td>
                    <td>
                      <span class="form-control">{{ payment.CashAmount }}</span>
                    </td>
                    <td class="text-right">{{ payment.CashAmount | currency:'Rp. ' }}</td>
                  </tr>
                  <tr ng-show="checkContain(2)">
                    <td>Credit/Debit Card</td>
                    <td>
                      <table class="table table-condensed table-bordered">
                        <thead>
                          <tr>
                            <th>Name</th>
                            <th>Card Type</th>
                            <th>Expiration</th>
                            <th>Amount</th>
                          </tr>
                        </thead>
                        <tbody>
                          <tr ng-repeat="transfer in payment.CreditCardPayments">
                            <td>{{ transfer.Name }}</td>
                            <td>{{ transfer.CardNumber }}</td>
                            <td>{{ transfer.ExpirationMonth }} - {{ transfer.ExpirationYear }}</td>
                            <td>{{ transfer.Amount | currency:'Rp. ' }}</td>
                          </tr>
                        </tbody>
                      </table>
                    </td>
                    <td class="text-right">{{ CCPayment | currency:'Rp. ' }}</td>
                  </tr>
                  <tr ng-show="checkContain(3)">
                    <td>Bank Transfer <a href ng-click="removeBT()">Remove</a></td>
                    <td>
                      <table class="table table-condensed table-bordered">
                        <thead>
                          <tr>
                            <th>Sender</th>
                            <th>Date</th>
                            <th>Note</th>
                            <th>Amount</th>
                          </tr>
                        </thead>
                        <tbody>
                          <tr ng-repeat="transfer in payment.BankTransfers">
                            <td>{{ transfer.Sender }}</td>
                            <td>{{ transfer.Date | date:'medium' }}</td>
                            <td>{{ transfer.note }}</td>
                            <td>{{ transfer.Amount | currency:'Rp. ' }}</td>
                          </tr>
                        </tbody>
                      </table>
                    </td>
                    <td class="text-right">{{ BankPayment | currency:'Rp. ' }}</td>
                  </tr>
                </tbody>
                <tfoot>
                  <tr>
                    <td class="text-left"><span ng-if="payment.PaymentStatus === 1"><b>Payment Methods:</b> <span ng-repeat="paymentMethod in PaymentMethodsArray">{{ PaymentMethods[paymentMethod].Label }} {{ ($index < PaymentMethodsArray.length-1) ? ', ' : '' }}</span></span></td>
                    <td class="text-right">Total</td>
                    <td class="text-right">{{ (payment.TotalAmount - payment.TotalDiscount) | currency: 'Rp. ' }}</td>
                  </tr>
                  <tr>
                    <td colspan="2" class="text-right">Payment</td>
                    <td class="text-right">{{ payment.TotalPayment | currency:'Rp. ' }}</td>
                  </tr>
                  <tr>
                    <td colspan="2" class="text-right">Changes</td>
                    <td class="text-right">
                      <span ng-if="payment.Change>=0"><strong>{{ payment.Change | currency:'Rp. ' }}</strong></span>
                      <span ng-if="payment.Change<0">Insufficient Payment</span>
                    </td>
                  </tr>
                </tfoot>
              </table>
              <div class="form-group">
                <label for="Note">Note</label>
                <p class="form-control">{{ payment.Note }}</p>
              </div>

            </div>
          </div>
        </div>
      </div>
    </form>
  </div>
</div>
</div>